<template>
    <div class="container">
        <div class="view">
            <div class="time">
                <div class="time-info">
                    <countDown :is-day="true" :tip-text="'倒计时 '" :day-text="' 天 '" :hour-text="' 时 '"
                        :minute-text="' 分 '" :second-text="' 秒'" :datatime='Date.parse(this.stopTime) / 1000'>
                    </countDown>
                </div>
            </div>
            <div class="info">
                <div class="info-img">
                    <img :src="this.image" alt="">
                </div>
                <div class="info-text">
                    <div class="price">
                        <span class="price-now">
                            已砍至：￥{{ this.price }}
                        </span>
                    </div>
                    <div class="status" style="margin-top: 14px;">
                        <span class="status-text">
                            原价:{{ this.cost }} 已有{{ this.bargainNum }}人帮忙砍价
                        </span>
                    </div>
                </div>
                <div>
                    <div>
                        <van-progress class="progress" :percentage="this.postage" pivot-text="" />
                    </div>
                    <span style="margin-left:15px">已砍{{ this.giveIntegral }}元</span><span
                        style="float: right;margin-right: 15px;">还剩{{ price -
                                this.postage
                        }}元</span>

                    <div class="qiang" style="width: 80%;margin:0 auto;margin-top: 20px; padding-bottom: 20px;">
                        <van-button round type="normal" size="large" @click="helpMe()">邀请好友帮忙砍价</van-button>
                        <van-button round type="danger" size="large" @click="buyMore()" style="margin-top:10px ">抢购更多商品</van-button>
                    </div>
                </div>


            </div>
            <div class="help">
                <div class="help-title">
                    砍价帮
                </div>
                <div class="help-man">
                    <img src="https://image.dayouqiantu.cn/5e79f6cfd33b6.png" />
                    <span class="help-phone">18501496015</span>
                </div>
            </div>


            <!-- <div class="product">
                product
            </div>



            <div class="rule">
                rule
            </div> -->
        </div>
    </div>
</template>
<script>
import { bargainDetail } from '@/api/bargain'
import countDown from '@/components/CountDown.vue'
export default {
    data() {
        return {
            bargainId: 0,
            bargainDetail: {},
            stopTime: '',
            image: '',
            title: '',
            price: 0,
            bargainNum: 0,
            cost: 0,
            postage: 0,
            giveIntegral: 0,
        }
    },
    components: {
        countDown
    },
    methods: {
        reciveBagainId() {
            this.bargainId = this.$route.query.bargainId
            this.getBargianDetail(this.bargainId)
        },
        getBargianDetail(id) {
            bargainDetail(id).then(res => {
                if (res.status === 200) {
                    this.bargainDetail = res.data
                    this.stopTime = res.data.bargain.stopTime
                    this.image = res.data.bargain.image
                    this.title = res.data.bargain.title
                    this.price = res.data.bargain.price
                    this.cost = res.data.bargain.cost
                    this.bargainNum = res.data.bargain.bargainNum
                    this.pastage = res.data.bargain.postage
                    this.giveIntegral = res.data.bargain.giveIntegral
                } else {
                    this.$toast('加载失败 请刷新页面或稍后重试')
                }
            })
        },
        helpMe() {
            this.$router.push({
                path: '/bargainHelp',
                query: {
                    bargainId: this.bargainId
                }
            })
            this.$toast('邀请好友帮忙砍价')
        },
        buyMore(){
            this.$router.push({
                path: '/productList'
            })
        }
    },
    mounted() {
        this.reciveBagainId()
    }

}
</script>
<style lang="scss" >
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 100%;
    height: auto;
    background-color: #f5f5f5;
}

.view {
    width: 90%;
    margin: 0 auto;
    height: auto;

    .time {
        width: 100%;
        height: 50px;
        border-radius: 10px;
        background-color: #fff;

        .time-info {
            text-align: center;
            margin: 0 auto;
            line-height: 50px;
            color: red;
        }
    }

    .info {
        margin-top: 5%;
        width: 100%;
        height: auto;
        background-color: #fff;
        border-radius: 10px;

        .info-img {
            margin-top: 4%;
            margin-left: 4%;
            width: 25%;
            height: 40%;
            float: left;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .info-text {
            margin-top: 4%;
            margin-left: 4%;
            width: 65%;
            height: 40%;
            float: left;

            .price {
                margin-top: 5%;

                .price-now {
                    font-size: 20px;
                    color: red;
                }
            }
        }

        .progress {
            height: 6px;
            clear: both;
            display: block !important;
            width: 90%;
            margin: 0 auto;

        }
    }

    .help {
        margin-top: 5%;
        width: 100%;
        height: auto;
        background-color: #fff;
        border-radius: 10px;

        .help-title {
            margin-left: 40%;
            font-size: 20px;
            color: red;
        }

        .help-man {
            margin-left: 20px;
            width: 100%;
            height: auto;

            img {
                border-radius: 50%;
                width: 40px;
                height: 40px;
            }

            .help-phone {
                margin-left: 10px;
                font-size: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 100%;
            }
        }

    }

    .product {
        margin-top: 5%;
        width: 100%;
        height: auto;
        background-color: yellow;
        border-radius: 10px;
    }

    .rule {
        margin-top: 5%;
        width: 100%;
        height: auto;
        background-color: yellow;
        border-radius: 10px;
    }
}
</style>